<template>
        <el-card shadow="never" style="max-height: 700px; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <!-- <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item> -->
                <el-form-item label="批次号:" prop="union_batch">
                    <el-input v-model="form.union_batch" placeholder="请输入批次号" disabled />
                </el-form-item>
                <el-form-item label="物流单号:" prop="tags">
                    <el-tag
                        :key="tag"
                        v-for="tag in tags"
                        closable
                        type=""
                        effect="plain"
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                        >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 物流单号</el-button>
                </el-form-item>
                <el-form-item label="1688订单号:" prop="tags2">
                    <el-tag
                        :key="tag"
                        v-for="tag in tags2"
                        closable
                        type=""
                        effect="plain"
                        :disable-transitions="false"
                        @close="handleClose2(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible2"
                        v-model="inputValue2"
                        ref="saveTagInput2"
                        @keyup.enter.native="handleInputConfirm2"
                        @blur="handleInputConfirm2"
                        >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput2">+ 1688订单号</el-button>
                </el-form-item>
                <el-form-item label="实际已采数:" prop="real_num">
                    <el-input v-model="form.real_num" placeholder="请输入实际已采数量" clearable />
                </el-form-item>
                <el-form-item label="总价格:" prop="purchase_price">
                    <el-input v-model="form.purchase_price" placeholder="请输入采购价格" clearable />
                </el-form-item>
                <!-- <el-form-item label="总数量:" prop="sum_num">
                    <el-input v-model="form.sum_num" placeholder="请输入总数量" clearable />
                </el-form-item> -->
                <el-button style="margin-left: 5px;" type="primary" plain icon="el-icon-download" size="small" v-loading="exportLoading" @click="handleExport">导出</el-button>

                
                <el-col :span="1.5">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :action="api.upload"
                        :on-preview="handlePreview"
                        :on-success="handleUploadSuccess"
                        :on-error="handleUploadError"
                        :auto-upload="false">
                        <el-button slot="trigger" size="small" type="warning">选择文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传修改</el-button>
                    </el-upload>
                </el-col>

                <template>
                    <div>
                        <el-table 
                        :data="purchase_data"
                        border
                        :summary-method="getSummaries"
                        show-summary
                        style="width: 100%"
                        >
                        <el-table-column align="center" label="SKU" width="">
                            <template slot-scope="{ row }">
                            <span>{{ row.sku }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="待采数量" width="">
                            <template slot-scope="{ row }">
                            <span>{{ row.num }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="实际已采数量">
                            <template slot-scope="{ row }">
                            <span v-show="!row.editname">{{ row.real_num }}</span>
                            <el-input style="display: block;" v-show="row.editname" v-model="row.real_num"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="操作" width="">
                            <template slot-scope="{ row }">
                            <el-button
                                v-show="!row.editname"
                                type="primary"
                                size="mini"
                                @click="row.editname = !row.editname"
                            >
                                修改实际已采数量
                            </el-button>
                            <el-button
                                v-show="row.editname"
                                type="success"
                                size="mini"
                                @click="(row.editname = false)"
                            >
                                Ok
                            </el-button>
                            </template>
                        </el-table-column>
                        </el-table>
                    </div>
                </template>
                <el-form-item label="保存草稿">
                    <el-switch v-model="form.is_draft"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>

            </el-form>
        </el-card>
</template>

<script>
export default {
    name: 'EditFormCom_number',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
        
            },
            form: {
                order_num:'',
                // real_num:'',
                purchase_price:'',
                is_draft:false,
                // sum_num:'',
            },
            purchase_data: [],
            tags: [],
            inputVisible: false,
            inputValue: '',
            tags2: [],
            inputVisible2: false,
            inputValue2: '',
            id: 0,
            // 接口地址
            api: {
                upload: `https://api.fan-zhou.com/admin/purchasedcg/uploads`,
            },
            exportLoading:false,
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval.dcg_info
                        this.form.display = 2
                        this.tags = nval.dcg_info.wl_num
                        this.tags2 = nval.dcg_info.order_num
                        this.purchase_data = nval.purchase_data
                        this.id = nval.id
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.form.purchase_data = this.purchase_data;
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },

        
        showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
            if(this.tags == ''){
                this.tags = []
            }
            this.tags.push(inputValue);
            this.form.wl_num = this.tags
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        handleClose(tag) {
            this.tags.splice(this.tags.indexOf(tag), 1);
            this.form.tags = this.tags
        },

        showInput2() {
        this.inputVisible2 = true;
        this.$nextTick(_ => {
            this.$refs.saveTagInput2.$refs.input.focus();
            });
        },
        handleInputConfirm2() {
        let inputValue2 = this.inputValue2;
        if (inputValue2) {
            if(this.tags2 == ''){
                this.tags2 = []
            }
            this.tags2.push(inputValue2);
            this.form.order_num = this.tags2
            }
            this.inputVisible2 = false;
            this.inputValue2 = '';
        },
        handleClose2(tag) {
            this.tags2.splice(this.tags2.indexOf(tag), 1);
            this.form.tags2 = this.tags2
        },

        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总计';
                    return;
                }
                if (index === 2) {
                    const values = data.map(item => Number(item['real_num']));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                        }, 0);
                        sums[index] += '';
                        this.form.real_num = sums[index];
                    } else {
                        sums[index] = '未知';
                    }
                    return;
                }
            });
            return sums;
        },

        
        // 导出按钮操作
        handleExport() {
            const qyparams = {
                id: this.id,
            }
            this.$confirm('是否确认导出数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.exportLoading = true
                    return this.request.get('/admin/purchasedcg/export_number', { params: qyparams, responseType: 'blob' })
                })
                .then(response => {
                    this.download(response,'待采购.xls')
                })
                .catch(err => {})
                .finally(() => {
                    this.exportLoading = false
                })
        },

        //上传
        submitUpload() {
            this.loading = true
            this.$refs.upload.submit();
        },
        handlePreview(file) {
            console.log(file);
        },
        
        // 上传成功回调
        handleUploadSuccess(res) {
            this.loading = false
            if (res.code == 1) {
                this.$message.success('上传成功');
                this.cancel();
            } else {
                this.$message({
                    type: 'error',
                    message: '上传失败'+res.msg,
                })
            }
        },
        // 上传失败
        handleUploadError() {
            this.$message({
                type: 'error',
                message: '上传失败',
            })
        },
        
    }
}
</script>
